<template>
	<view class="content">
		<swiper class="swiper" circular>
			<swiper-item v-for="(i,index) in listBanner" :key="index">
				<view class="swiper-item uni-bg-red">
					<image :src="i.imgUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>{{ num }}</view>
		<view @click="ceshi(1)">测试+</view>
		<view @click="ceshi(2)">测试-</view>
		<!-- <view v-for="(i,index) in personsList" :key="index">{{ i.name }}{{ i.age }}岁</view> -->
		<Child :list="personsList" @sayHello="handle" ref="childRef" :slowSpeed="slowSpeed"></Child>
		<input v-model="price" placeholder="单价" />
		<view>总价：{{ totalNum }}</view>
		<view>Current Count: {{ counter.count }}</view>
		<view @click="handleCount">点击测试</view>
		<view @click="handleLink">跳转</view>
		<button @click="getChild">触发子组件方法</button>
		<image :src="imageUrl" mode="aspectFill"></image>
		<button @click="goLink">手写板</button>
	</view>
</template>

<script setup lang="ts">
	import { useCounterStore } from "@/stores/counter"
	import { type PersonInter, type Persons } from '@/types'
	import {
		getIndexData,
		getImage
	} from '@/api/api.js'
	import { reactive, ref, computed, watchEffect } from 'vue'
	import { onReady, onLoad } from '@dcloudio/uni-app'
	import Child from "@/components/Child.vue"
	const slowSpeed = 250
	const counter = useCounterStore()
	// counter.count++
	// 自动补全！ ✨
	// counter.$patch({ count: counter.count + 1 })
	// 或使用 action 代替
	const title = ref<string>('Hello')
	let imageUrl = ref<any>()
	let num = ref<number>(0)
	const price = ref<number>(5)
	let totalNum = computed(() => {
		console.log('执行computed计算')
		return num.value * price.value
	})
	// interface PersonInter {
	// 	id : string,
	// 	name : string,
	// 	age : number
	// }
	// type Persons = PersonInter[]
	let personsList = reactive<Persons>([
		{ id: "asyud7asfd01", name: "张三", age: 60 },
		{ id: "asyud7asfd02", name: "李四", age: 18 },
		{ id: "asyud7asfd03", name: "王五", age: 5 },
	])
	let personForm = reactive<PersonInter>({
		id: "asyud7asfd01", name: "张三", age: 60
	})
	console.log(personForm)
	const handle = (p : any) => {
		console.log('子组件调用了父组件的方法', p);
	}
	const handleLink = () => {
		uni.navigateTo({
			url: '/pages/ceshi/index'
		})
	}
	const goLink = () => {
		uni.navigateTo({
			url: '/pages/qianming/index'
		})
	}
	const handleCount = () => {
		counter.increment()
	}
	const ceshi = (type : number) => {
		if (type == 1) {
			num.value++
		} else {
			num.value--
		}
	}
	let listBanner = ref([])
	const ceshiFun = async () => {
		try {
			// const data : PersonInter = {
			// 	id: "asjasjfd", name: "老六", age: 100
			// }
			const data = {
				signTime: new Date().getTime(),
				currPage: 1,
				pageSize: 10,
				hospitalId: "gzln7038dbef4c948c3e8102dd6c0296"
			}
			let res = await getIndexData(data)
			listBanner.value = res.listBanner
			console.log(res)
		} catch (error) {

		}
	}
	const getImg = async () => {
		try {
			let res = await getImage()
			imageUrl.value = res
		} catch (e) {
			//TODO handle the exception
		}
	}
	const childRef = ref<any>()
	const getChild = () => {
		// 调用子组件的方法或者变量，通过value
		childRef.value.hello("hello world！");
	}
	onReady(() => {
		console.log('onReady')
	})
	onLoad(() => {
		console.log('onLoad')
		ceshiFun()
		// getImg()
	})
	watchEffect(() => {
		if (num.value >= 10) {
			console.log('给服务器发请求')
		}
	})
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		height: 300rpx;
		width: 100%;
	}
</style>